<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>list</title>
    <link rel="stylesheet" th:href="@{/plugins/hp-ui/hp-ui.css}" />
    <link rel="stylesheet" th:href="@{/css/base.css}" />
    <link rel="stylesheet" th:href="@{/css/blog/list.css}" />

    <style>
        .content-wrapper {
            width: 1180px;
            margin: 20px auto;
            display: flex;
        }

        .content-wrapper article{
            flex-grow: 1;
        }

        .content-wrapper section{
            width: 320px;
        }

        .content-wrapper .table-card{
            font-size: 14px;
            padding: 0 10px;
            line-height: 40px;
            border-bottom: 1px solid #ddd;
        }

        .content .article-detail {
            padding: 20px 10px;
            font-family: 微软雅黑;
            border-bottom: 1px solid #ddd;
        }

        .content .article-detail .author-info{
            font-size: 12px;
            line-height: 30px;
            color: #999;
        }

        .content .article-detail .author-info .name {
            color: #333;
            margin-right: 20px;
        }

        .content .article-detail .author-info .name:hover,
        .content .article-detail .title a:hover {
            color: #4285f4;
        }
        .content .article-detail .title a{
            color: #333333;
            font-size: 18px;
            font-weight: bold;
            line-height: 24px;
        }
        .content .article-detail .title a:visited{
            color: #333333;
        }

        .content .article-detail .brief{
            font-size: 14px;
            color: #666;
            line-height: 20px;
            height: 40px;
            padding: 10px 0;
            overflow: hidden;
        }
        .content .article-detail .other {
            line-height: 22px;
            font-size: 12px;
            color: #999;
        }

        .hp-page {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<header th:replace="~{fragments/header :: header}"></header>
<div class="content-wrapper">
    <article>
        <div class="table-card">
            <ul>
                <li>最新博文</li>
            </ul>
        </div>
        <div class="content">
            <div class="article-detail" th:each="article : ${articles}">
                <p class="author-info"><a th:href="${article.author}" class="name"><span th:text="${article.author}"></span></a>发布于：<span th:text="${article.createdTime}"></span></p>
                <h3 class="title"><a th:href="'/blog/' + ${article.id}" th:text="${article.title}">java 入门到精通</a></h3>
                <div class="brief" th:text="${article.brief}">20191108_第0章——开源共享精神
                    稳定：无论是进行开发还是运维，稳定压倒一切。最新：老版本可能会有更大的概率存在安全漏洞或者功能缺陷，而新版本不仅出现漏洞的概率小，而且即便出现漏洞，也会快速得到众多开源社区和企业的响应并更快地修复。
                </div>
                <div class="other">
                    <span>阅读&nbsp;<span th:text="${article.count}"></span></span>&nbsp;&nbsp;<span>评论&nbsp;<span th:text="${article.comments}"></span></span>
                </div>
            </div>
        </div>

        <!-- 分页 -->
<!--        <div class="hp-page">-->
<!--            <a th:href="@{'/blog?page=1&page_size=' + ${articles.getSize()}}"-->
<!--               th:if="${articles.getNumber()} > 0">首页</a>-->

<!--            <a th:href="@{'/blog?page=' + ${articles.getNumber()} +  '&page_size=' + ${articles.getSize()}}"-->
<!--               th:if="${articles.hasPrevious()}">上一页</a>-->

<!--            &lt;!&ndash;-->
<!--            Thymeleaf简单分页：https://blog.csdn.net/qq_32719215/article/details/94400725-->
<!--            Thymeleaf分页组件：https://www.jianshu.com/p/60ac23c092c0-->
<!--            &ndash;&gt;-->
<!--            <a th:href="@{'/blog?page=' + ${pageNum} + '&page_size=' + ${articles.getSize()}}"-->
<!--               th:each="pageNum : ${#numbers.sequence(1, articles.getTotalPages())}"-->
<!--               th:class="${articles.getNumber() + 1 == pageNum} ? 'active'"-->
<!--               th:text="${pageNum}"></a>-->

<!--            <a th:href="@{'/blog?page=' + ${articles.getNumber() + 2} +  '&page_size=' + ${articles.getSize()}}"-->
<!--               th:if="${articles.hasNext()}">下一页</a>-->

<!--            <a th:href="@{'/blog?page=' + ${articles.getTotalPages()} + '&page_size=' + ${articles.getSize()}}"-->
<!--               th:if="${articles.getNumber()} < ${articles.getTotalPages() - 1}">末页</a>-->
<!--        </div>-->
        <div th:replace="~{fragments/pagination :: pagination(page=${articles}, uri='/blog?')}"></div>
    </article>
    <section>
        分类
    </section>
</div>
</body>
</html>